<template>
  <div>
    <h1>B组件,{{ num }}</h1>
    <n-button type="success" size="medium" @click="count.plus(10)">
      通过actions修改state ++
    </n-button>
    <div v-for="item in star.filterList" :key="item.id">
      姓名:{{item.name}} 年龄:{{item.age}}
    </div>
    <n-button type="primary" size="medium" @click="handleAdd">录入新商品</n-button>
    <div v-for="(item,index) in goods.filterGoodsList" :key="index">
     商品名称：{{ item.name }}  商品价格:{{ item.price }}
    </div>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia';
import { useCount } from '../../store/count';
import { useStar } from '../../store/star';
import { useGoods } from '../../store/goods';
let count = useCount()
// let {num} = count  //对于状态机数据的直接解构，会导致其丢失响应性
let {num} = storeToRefs(count) //解构的时候，需要使用storeToRefs来保持响应性
const star = useStar()
const goods = useGoods()
const handleAdd = ()=>{
  goods.goodsAdd({
    name:'新商品',
    price:Math.random()*100+50
  })
}
</script>

<style lang="scss" scoped>

</style>